<?php
 /** Affiche chacune des pages de l'histoire. */
function page_histoire($current_page, $contenu_html_gauche, $list_images, $liste_titre_images) { ?>
    <div id="bandeau"><div style="width:1000px;"> <!-- Exceptionnel, mais sinon ça rentre pas. -->
			<div>
				<ul class="menu_band"> <?php
                                    $liste_page = array("histoire", "fin_regne", "rapport_maj", "memoires_stront", "ultimatum", "exode", "echange_rapports");
                                    $liste_titres = array("Mémoires post Humanité", "La fin d'un règne", "Rapport de mise à jour", "Mémoires de Stront", "Ultimatum au chef de clan", "L'exode", "Échange de rapports");
                                    $num_current_page = 0;
                                    for($i = 1; $i < 7; $i++){ //<!-- les <li> sont collés côte à côte pour éviter un espace que le saut de ligne crée - oui oui -->
                                        echo "<li><a href='".$liste_page[$i].".php' class='";
                                        if($i == 1) echo "bordure_gauche ";
                                        if($liste_page[$i] == $current_page){
                                            echo "current ";
                                            $num_current_page = $i;
                                        }
                                        echo "'>".$liste_titres[$i]."</a></li>";
                                    }
                                ?>
				</ul>
			</div>
		</div></div>
		<div id='background_corps'> </div><!-- Div contenant simplement la couleur du corps, qui vient se glisser sous le motif de bulle
 											(le vrai corp se glisse au-dessus, pour être cliquable). -->
		<div id="corps">
			<div id="contenus">
				<div id="titre_chapitre"><?php echo $liste_titres[$num_current_page]; ?></div>
				<div id="col_g">
					<?php echo $contenu_html_gauche;
                                            if($num_current_page < 6)
                                                echo "<a href='".$liste_page[$num_current_page+1].".php' class='suite'><em>".$liste_titres[$num_current_page+1]." </em><span>&raquo;</span></a>";
                                        ?>
				</div>
				<div id="col_d">
                                    <?php if($list_images != null) { ?>
					<a href="#" title="Voir l'image entière" id="lien_zoom"><img id="appercu_illu" src="" alt="" />
					<span class="picto_apercu"></span></a> <?php
                                        if(count($list_images) > 1){
                                            echo "<ul class='miniature'>";
                                            for($i = 0; $i < count($list_images); $i++){
                                                    echo "<li><a href='' onclick='select_image(\"".$list_images[$i]."\", \"".$liste_titre_images[$i]."\", $i); return false;'><img "
                                                    . "src='/images/histoire/miniature/".$list_images[$i].".png' alt='".$liste_titre_images[$i]."' /><div id='contour$i' class='contour ";
                                                    if($i == 0) echo "select";
                                                    echo"'></div></a></li>";
                                            }
                                            echo "</ul> ";
                                        }
					echo "<em id='titre_illu'> </em>";
                                    }
                                    ?>
				</div>
                                <script language='Javascript'>
                                    function select_image(image, titre, num_miniature){
                                        document.getElementById("appercu_illu").src = "/images/histoire/apercu/"+image+".jpg";
                                        document.getElementById("appercu_illu").alt = titre;
                                        document.getElementById("titre_illu").innerHTML = titre;
                                        document.getElementById("lien_zoom").onclick = function(){
                                            afficher_popup("image_fullscreen.php?lien=histoire/zoom/"+image+".jpg", 500, true);
                                            return false;
                                        };
                                        <?php
                                        if(count($list_images) > 1){ ?>
                                            for(var i = 0; i < <?php echo count($list_images); ?>; i++){
                                                 document.getElementById("contour"+i).classList.remove('select'); //On supprime l'état actif de toutes les miniatures
                                            }
                                            document.getElementById("contour"+num_miniature).classList.add('select'); //Puis on le met sur la bonne.
                                        <?php } ?>
                                    }
                                    select_image("<?php echo $list_images[0]; ?>", "<?php echo $liste_titre_images[0]; ?>", 0);
                                </script> 
			</div> <!-- fin div contenu-->
                    </div> <!-- fin div corps-->
                    <?php
}
?>